<template>
    <div >
      <partner-credit :item="item">
        <div slot="creditBtn">
          <flexbox class="button_apply" >
            <flexbox-item>
              <x-button  @click.native="contentShare()" >内容分享</x-button>
            </flexbox-item>
            <flexbox-item>
              <x-button @click.native="imgtextShare()" >二维码分享</x-button>
            </flexbox-item>
          </flexbox>
          <div v-transfer-dom>
            <x-dialog v-model="showHideOnBlur" class="dialog-demo creditLoan_qrcode" hide-on-blur>
              <div class="img-box">
                <p class="qcode_p">微信扫描二维码或长按保存</p>
                <qrcode v-show="!qrcodeShow" :value="codeUrl" type="img" class="img_qr"></qrcode>
                <div v-show="qrcodeShow">
                  <img :src="dataUrl">
                  <canvas ref="canvas" v-show="false"></canvas>
                </div>
              </div>
              <div @click="showHideOnBlur=false">
                <span class="vux-close"></span>
              </div>
            </x-dialog>
          </div>
          <share-float :shareshow="shareshow" :friends="friends" v-on:sharefriends="hideshare"></share-float>
        </div>
      </partner-credit>
  </div>
</template>
<script>
import { XButton, Flexbox, FlexboxItem, TransferDomDirective as TransferDom, XDialog, Qrcode } from 'vux'
import PartnerCredit from '../comment/PartnerCredit'
import ShareFloat from '../comment/ShareFloat'
import api from "../api"
import utils from '../utils'
import qr from 'qr.js'
export default {
  directives: {
    TransferDom
  },
  data(){
    return{
      item: {},
      qrcodeShow: true,
      shareshow: false,
      showHideOnBlur: false, // 弹窗
      friends: false,
      codeUrl: '',
      dataUrl: '',
      logo: '',
      size: 128,
      bgColor: '#fff',
      fgColor: '#000'
    }
  },
  components:{
    XButton,
    Flexbox,
    FlexboxItem,
    PartnerCredit,
    ShareFloat,
    XDialog,
    Qrcode
  },
  created(){
    window.document.title = '信用卡详情'
    console.log(this.$store.state.credit_type, 9214)
    var params = {
      userId: this.$store.state.userID || '',
      partnerId: utils.getQueryString('detail_id')
    }
    api.creditloanDetail(params).then(res => {
      console.log(res)
      if (res.status === '200') {
        this.item = res.data
        this.sharecontent()
        utils.jssdkwx(api, this.$wechat, this.$store)
      }
    })
  },
  methods:{
    createQr () {
      const qrcode = qr(this.codeUrl)
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const size = this.size / qrcode.moduleCount
      const scale = window.devicePixelRatio / this.getPixelRatio(ctx)
      canvas.height = canvas.width = this.size * scale
      ctx.scale(scale, scale)
      qrcode.modules.forEach((row, rdx) => {
        row.forEach((cell, cdx) => {
          ctx.fillStyle = cell ? this.fgColor : this.bgColor
          var w = (Math.ceil((cdx + 1) * size) - Math.floor(cdx * size))
          ctx.fillRect(Math.round(cdx * size), Math.round(rdx * size), w, w)
        })
      })
      var image = document.createElement('img')
      image.src = this.logo
      image.onload = () => {
        var dwidth = this.size * 0.2
        var dx = (this.size - dwidth) / 2
        var dheight = image.height / image.width * dwidth
        var dy = (this.size - dheight) / 2
        image.width = dwidth
        image.height = dheight
        ctx.drawImage(image, dx, dy, dwidth, dheight)
        this.dataUrl = canvas.toDataURL()
      }
    },
    getPixelRatio (ctx) {
      return ctx.webkitBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    },
    hideshare () {
      this.shareshow = false
    },
    contentShare () {
      this.shareshow = true
      this.sharecontent()
    },
    imgtextShare (index) {
      this.logo = ''
      this.codeUrl = this.$store.state.Url + '/creditLogin/index?shareParam=share&userId=' + this.$store.state.userID + '&partnerId=' + this.item.partnerId + '&channel=6'
      if (this.item.qrCodeLogoIsShow === false) {
        this.qrcodeShow = false
      } else {
        this.qrcodeShow = true
         if (this.item.partnerId) {
          // this.logo = this.item.logoUrl
          this.logo = this.$store.state.logoUrl + this.item.partnerId + '.png'
        } else {
          this.logo = '../../static/img/uxd_logo.png'
        }
        setTimeout(() => {
          this.createQr()
        },10)
      }
      this.showHideOnBlur = true
    },
    sharecontent (index) {
      var self = this
      var shareUrl, shareParams
      if (this.item.partnerId) {
        shareUrl = this.$store.state.Url + '/creditLogin/index'
        shareParams = '?shareParam=share&userId=' + self.$store.state.userID + '&partnerId=' + this.item.partnerId
      } else {
        shareUrl = this.$store.state.Url + '/creditLogin/index'
        shareParams = '?shareParam=share&userId=' + self.$store.state.userID
      }
      this.$store.commit('changeIndexConf', {
        shareTitle: this.item.shareTitle,
        shareDesc: this.item.shareDesc,
        shareImg: this.item.shareImageUrl,
        shareLink: shareUrl + shareParams
      })
      utils.refreshShare(this.$wechat, this.$store)
    }
  }
}
</script>


